<template>
    <div>
        <div class="header">
            <img src="../assets/images/logo.png" alt="">
        </div>
        <div class="box">
            <input type="text" placeholder="请输入手机号码" v-model="p_num">
            <input type="text" placeholder="请输入验证码" v-model="s_num">
            <button class="yzm" @click="code()" id="yzm">获取验证码</button>
            <input type="password" placeholder="请输入新密码" v-model="password_new">
            <input type="password" placeholder="请再次输入新密码" v-model="password_new1">
        </div>
        <div class="btn" @click="ok()">
            <button>提交</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            p_num: "",
            s_num: "",
            password_new: "",
            password_new1: ""
        };
    },
    methods: {
        ok() {
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (this.p_num == "") {
                this.$Message.warning("手机号不能为空");
            } else if (this.s_num == "") {
                this.$Message.warning("验证码不能为空");
            } else if (!myreg.test(this.p_num)) {
                this.$Message.error("请填写正确的手机号");
            } else if (this.password_new == "") {
                this.$Message.warning("新密码不能为空");
            } else if (this.password_new1 == "") {
                this.$Message.warning("再次输入密码不能为空");
            } else {
                var qs = require("qs");
                this.$Spin.show({
                    render: h => {
                        return h("div", [
                            h("Icon", {
                                class: "demo-spin-icon-load",
                                props: {
                                    type: "load-c",
                                    size: 18
                                }
                            }),
                            h("div", "Loading")
                        ]);
                    }
                });
                this.axios({
                    method: "post",
                    url: `${this.siteUrl}/setPassWord`,
                    data: qs.stringify({
                        p_num: this.p_num,
                        s_num: this.s_num,
                        newpw: this.password_new,
                        repw: this.password_new1
                    })
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.result == 200) {
                            this.$Spin.hide();
                            this.$Message.success("修改成功");
                            this.$router.push({ name: "index" });
                        } else {
                            this.$Spin.hide();
                            this.$Message.error(response.data.message);
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
        },
        // 获取验证码
        code() {
            // 验证码倒计时
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            
            if (this.p_num == "") {
                this.$Message.warning("手机号不能为空");
            }else if (!myreg.test(this.p_num)) {
                this.$Message.error("请填写正确的手机号");
            }  else {
                var yzm = document.getElementById("yzm");
                var clock = "";
                var nums = 60;
                yzm.disabled = true; //将按钮置为不可点击
                yzm.style.backgroundColor = "#ccc";
                yzm.innerHTML = nums + "秒后可重新获取";
                clock = setInterval(doLoop, 1000); //一秒执行一次

                function doLoop() {
                    nums--;
                    if (nums > 0) {
                        yzm.innerHTML = nums + "秒后可重新获取";
                    } else {
                        clearInterval(clock); //清除js定时器
                        yzm.disabled = false;
                        yzm.style.backgroundColor = "#5aa0c8";
                        yzm.innerHTML = "点击发送验证码";
                        nums = 60; //重置时间
                    }
                }   
                
                // 请求验证接口
                var qs = require("qs");
                this.axios({
                    method: "post",
                    url: `${this.siteUrl}/getSecretNumberForget`,
                    data: qs.stringify({
                        p_num: this.p_num
                    })
                })
                .then(response => {
                    if (response.data.result == 200) {
                    } else {
                        this.$Message.warning(response.data.message);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
            }
        }
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].style.background = "#fff";
    },
    mounted() {
        this.$Message.config({
            top: 200,
            duration: 1
        });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
    width: 100%;
    height: 48vh;
    background: #5aa0c8;
    text-align: center;
}
.header img {
    width: 40%;
    margin-top: 8vh;
}

.box {
    width: 80%;
    margin-left: 10%;
    height: 210px;
    margin-top: -60px;
    border-radius: 5px;
    box-shadow: 0px 1px 2px 1px #ccc;
    background: #fff;
    position: relative;
}
.box input {
    width: 100%;
    height: 46px;
    line-height: 46px;
    border: none;
    outline: none;
    padding-left: 10px;
}
.box input {
    border-bottom: 1px solid #ddd;
    margin-top: 5px;
}
.box input:last-child {
    border-bottom: none;
}
.btn {
    width: 100%;
}

.btn button {
    width: 80%;
    height: 40px;
    background: #5aa0c8;
    border: none;
    color: #fff;
    outline: none;
    margin-left: 10%;
    margin-top: 50px;
    margin-bottom: 50px;
    border-radius: 5px;
}
.yzm {
    background: #5aa0c8;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    right: 10px;
    top: 55px;
    width: 40%;
    font-size: 13px;
    border:none
}
</style>
